<template>
  <el-upload
      class="avatar-uploader"
      action="#"
      :show-file-list="false"
      :auto-upload="false"
      :on-change="handleAvatarChange"
      :before-upload="beforeAvatarUpload"
      accept="image/*"
  >
    <img v-if="previewImage" :src="previewImage" class="avatar" />
    <img v-else-if="avatarImgUrl" :src="avatarImgUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>
<script setup>
import { Plus } from '@element-plus/icons-vue'
import { computed } from 'vue'
import {imgUrl} from "@/utils/http.js";
const props = defineProps({
  src: Object, // 头像地址
  handleAvatarChange: Function, // 头像选择变化处理函数
  previewImage: String, // 预览图片地址
  beforeAvatarUpload: Function, // 头像上传之前的钩子函数
})
const avatarImgUrl = computed(() => {
  if(props.src === null || props.src === "" || props.src === undefined) return null;
  //判断是是http开头的
  if (props.src.startsWith('http')) {
    return props.src
  } else {
    return imgUrl+props.src
  }
})
</script>

<style>
.avatar-uploader .avatar{
  width: 100% ;
  height: 100%;
  display: block;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style>